Wake lock APIってなに？

CX事業本部の熊膳です。

先日リリースされたGoogle Chrome 84のリリースノートをよんでると、Wake lock APIに対応をという記述を見つけました。 Wake lock APIって何？ってことで調べてみました。

Wake lock APIとは

Wake lock APIは、簡単に言うとスリープしないようにできる機能のようです。

W3C : Wake lock API

A wake lock prevents some aspect of the device from entering a power-saving state (e.g., preventing the system from turning off the screen).

Wake lock は、デバイスの一部の側面が省電力状態に入るのを防ぎます（たとえば、システムが画面をオフにするのを防ぎます）。（Google Translate）

使い方は、ここ やここが詳しいですね。

Can I useで確認したところ、2020年7月時点では、最新のいくつかのブラウザしか対応していませんでした。

やってみた

では早速使ってみましょう。

環境は以下で行います。

• macOS Catarina
  • バッテリー時にディスプレイをオフにするまでの時間：1分
• Chrome 84（84.0.4147.89）

ブラウザ上でタイマーを表示するスクリプト（今回一番時間をかけて作ったもの）を動かしながら、Wake lock APIを使うとどうなるかを確認します。

まずは初期状態で測定

タイマースタート後、スリープするまでの時間は以下となりました。（3回測定）

• 1分15秒
• 1分14秒
• 1分15秒

1分15秒ぐらいでスリープしています。

Wake lock APIを実行

以下のスクリプトを実行した後、タイマーをスタートしてみました。

const wl = await navigator.wakeLock.request('screen');

3分経過してもスリープしません。Wake lock APIが効いているようです。

結果：スリープ抑制

releaseしてみる

続いて、以下のスクリプトを実行した後、タイマーをスタートしてみました。

const wl = await navigator.wakeLock.request('screen');
wl.release();

結果は、1分15秒後にスリープしました。release()によりWake lock APIが無効化されたようです。

結果：スリープ抑制解除

別タブで実行

Chromeでタブを2つ開き、アクティブでないタブでWake lock APIを実行後、アクティブ側のタブでタイマーをスタートしてみました。

結果は、1分15秒後にスリープでした。アクティブなタブでWake lock APIが実行されている場合に有効のようでした。

結果：スリープ抑制しない

Chromeが前面にない

ChromeでWake lock APIを実行後、タイマーをスタートし、タイマーを表示したままChromeブラウザ以外を前面にしてみました。具体的にはデスクトップをクリックしFinderをアクティブ（メニューがFinder表示）にしてみました。

結果は私の予想と違いスリープしませんでした。VisualStudio Codeをアクティブにして同様の確認をしてみましたが、やはりスリープせず。どうやらChromeが前面かどうかは関係ないようです。タブの結果と合わせると、ChromeのアクティブなタブでWake lock APIが実行されていれば、Chromeブラウザ自体が最前面になくてもいいようです。

結果：スリープ抑制

最小化

ChromeでWake lock APIを実行後、タイマーをスタートし、Chromeのブラウザを最小化してタイマーをスタートしてみました。

結果は、1分15秒でスリープしました。最小化だと効かないようです。最前面にないとは状態が違うということのようです。ちょっと注意が必要ですね。

結果：スリープ抑制しない

バッテリー残量少

バッテリー残量が少ない場合は、ブラウザに対してWake lockをリクエストしても拒否される場合があるとの記述があったので、確認してみました。

結果は、私の環境ではバッテリー残量に関わらずスリープの抑制ができてしまいました。残量20%, 10%, 5%, 2%, 1%のいずれもスリープ抑制していました。とりあえず私の環境ではそういう結果になりました。

結果：スリープ抑制

Safariで実行

一応Safari（バージョン13.1.2 (15609.3.5.1.3)）でどうなるか試したところ、サポートしていないため予想通りエラーとなりました。

結果：エラー

参考までに、サポートしているかどうかは以下で確認できます。

if ('wakeLock' in navigator) {
  // Screen Wake Lock API supported 
}

まとめ

Chrome 84で正式対応したWake lock APIについて調べてみました。Wake lock APIは、スリープを抑制する事がわかりました。Macのデスクトップ以外の環境ではまた違った結果になるかもしれませんが、私が確認した環境での結果を紹介しました。

現在関わっているプロジェクトでもWebアプリを作成しており、QRコードを読み込んだり、認証用の番号を表示する機能があります。このときスリープしないようにこの機能が使えるかなと思いました。ブラウザの対応状況はまだまだですが、覚えておきたいと思います。

以上、どなたかの参考になれば幸いです。